const path = require('path')
const commonConfig = require('./webpack.config')
const {merge} = require('webpack-merge')
const htmlWebpackPlugin = require('html-webpack-plugin')

const devConfig = {
  mode: 'development', // 开发环境
  output: {
    filename: 'PacktDataStructuresAlgorithms.js',  // 输出文件名
    path: path.resolve(__dirname,'lib')  // 输出目录
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
    },
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      // 以根目录中的index.html文件作为模板来自动生成dist/index.html文件
      // 注意，这里是相对根目录而言的，因为脚本的上下文是在根目录下
      template: 'index.html',  
      // inject: 'head', // 脚本注入的位置，可以是head, body，或者为 false默认
      // 在这里还可以自定义参数，在模板中，使用ejs方式 <%= htmlWebpackPlugin.options %>获取自定义属性
      title: 'learning-javascript-data-structures-and-algorithms',
      // webpack5默认开启压缩属性，webpack4要手动设置
      // minify: {
      //   removeComments: true, // 删除注释
      //   collapseWhitespace: true  // 删除空格
      // }
    })
  ],
}

module.exports = merge(commonConfig, devConfig)
